<div class="row" data-ng-controller="GnCategoriesController">
  <div class="col-lg-5">
    <div class="panel panel-default">
      <div class="panel-heading" data-translate=""> categories</div>

      <div class="panel-body flex-col">

        <!-- filter field  -->
        <div class="pos-relative width-100">
          <input class="form-control" type="search"
                data-ng-model="categorySearch.$"
                data-ng-show="categories.length > 1"
                autofocus=""
                placeholder="{{'filter' | translate}}"/>
          <span class="fa fa-times gn-input-clear"
            ng-click="categorySearch.$ = ''"
            ng-show="categorySearch.$"></span>
        </div>
        <input type="hidden" data-ng-model="categorySelected.id"/>
        <div class="flex-spacer"></div>

        <!-- categories list  -->
        <div class="list-group width-100">
          <a href="" class="list-group-item" data-ng-repeat="c in pageItems()"
            ng-class="{ 'active': c === categorySelected }"
             data-ng-click="selectCategory(c)">
            <span class="fa gn-icon-{{c.name}}"></span>
            {{c.label[lang]}}</a>
          <span data-gn-pagination-list=""
                data-items="categories | filter:categorySearch"
                data-cache="categories"/>
        </div>

        <!-- Add new button  -->
        <button type="button" class="btn btn-success btn-block"
          data-ng-click="addCategory()">
          <i class="fa fa-plus"/>
          <span data-translate="">newCategory</span>
        </button>
      </div>
    </div>

    <div gn-need-help="administrator-guide/managing-classification-systems/managing-categories.html">
    </div>
  </div>

  <div class="col-lg-7" data-ng-hide="categorySelected.id==null">
    <form name="gnCategoryFrom" class="form-horizontal">
              <input type="hidden" name="_csrf" value="{{csrf}}"/>
      <div class="panel panel-default">
        <div class="panel-heading">
          <span data-ng-hide="categorySelected.id == ''" data-translate="">updateCategory</span>
          <span data-ng-hide="categorySelected.id != ''" data-translate="">newCategory</span>
          <strong>{{categorySelected.label[lang]}}</strong>

          <div class="btn-toolbar">
            <button type="button" class="btn btn-primary pull-right"
                    data-ng-disabled="!gnCategoryFrom.$dirty"
                    data-ng-click="saveCategory()"
            ><span class="fa fa-save"></span> {{"saveCategory"|translate}}
            </button>
            <button type="button" class="btn btn-primary pull-right btn-danger"
                    data-ng-hide="categorySelected.id == ''"
                    data-ng-click="deleteCategory(categorySelected.id)"
            ><span class="fa fa-trash"></span> {{"deleteCategory"|translate}}
            </button>
          </div>
        </div>
        <div class="panel-body">
          <fieldset>
            <label data-translate="" class="col-lg-2 control-label">categoryName</label>
            <div class="col-lg-10">
              <input type="text" id="categoryname"
                     name="name"
                     class="form-control"
                     autofocus=""
                     data-ng-model="categorySelected.name"> </input>
            </div>
          </fieldset>

          <div data-ng-hide="!categorySelected.label">
            <h3><span data-translate="">translationForCategory</span> {{categorySelected.name}}</h3>
            <table class="table table-striped">
              <tr
                data-ng-repeat="(key, value) in categorySelected.label">
                <td>{{key | translate}}</td>
                <td><input type="text" class="form-control"
                           value="{{value}}"
                           data-ng-model="categorySelected.label[key]"
                /></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
